#{extends 'master.html' /}
#{set 'title'}
&{'Shop.home.title'}
#{/set}
#{set isHomeActive:'active' /}
#{set 'moreScripts'}
<script type="text/javascript" src="@{'/public/javascripts/plugins/slider/slider.js'}"></script>
<script type="text/javascript">
    $("#category-slider").slider();
</script>
#{/set}
#{set 'moreStyles'}
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/javascripts/plugins/slider/slider.css'}"/>
#{/set}
<div id="category-slider">
    <div id="slider-images">
    %{index = 0}%
    #{list items:categoryImages, as:'image'}
        <a href="#" _href="@{Product.productList(image.category.id, 1, 0, 1, 0)}" title="${image.category.title}">
            <img src="@{Category.getImage(image.imageId, 400, 776)}" alt="${image.category.title}"
                 title="${image.category.title.toLowerCase().capFirst()}"
                 id="wows${index++}"/>
        </a>

        <div class="slide-title">
            <a href="@{Product.productList(image.category.id, 1, 0, 1, 0)}">
            ${image.category.title.toLowerCase().capFirst()}
            </a>
        </div>
    #{/list}
    </div>
    <div class="ws_bullets">
    %{index = 0}%
    #{list items:categoryImages, as:'image'}
        <a href="#wows${index++}">
            <img src="@{Category.getImage(image.imageId, 99, 150)}"
                 alt="${image.category.title.toLowerCase().capFirst()}"
                 title="${image.category.title.toLowerCase().capFirst()}"/>

        </a>

    #{/list}
    </div>
</div>

<ul class="top_products">
#{list items:topProducts, as:'product'}
%{className = product_isLast ? "" : "delimetered_box"}%
    <li>
        <div class="delimetered_box">
            <span class="priceTag">${product.price.format('##,###')} руб.</span>
            <a href="@{Product.display(product.id)}"><img
                    src="@{Product.productImage(product.id, 0, 110, 110, 'png')}"/></a>

            <div class="clear"></div>
            <span class="title"><a href="@{Product.display(product.id)}">${product.title}</a></span>

        </div>
    </li>
#{/list}
</ul>
<div class="clear"></div>
#{set 'fixStyles'}
<style type="text/css">
    #slider-images div.slide-title {
        display: block;
    }
</style>
#{/set}

